<template>
  <up-sticky bgColor="#fff" style="margin:0 20rpx">
    <up-tabs :list="list1"></up-tabs>
  </up-sticky>
  <view style="padding-bottom: 50rpx" >
    <a-card :shadow="false" v-for="i in 4" :key="i" @click="toPath('/cook/index/detail')">
      <view class="img-box">
        <image class="cook-img" style="width: 100%;height: 400rpx;border: 5rpx"
               src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"/>
        <view class="cook-tag flex">
          <view>#早餐</view>
          <view>#中级</view>
          <view>#营养</view>
        </view>
      </view>
      <view class="l-40" style="margin-top: 15rpx">澳洲谷饲牛排</view>
      <view class="f-c-9 l-30 u-f-sm" style="margin-top: 15rpx">采用澳洲牛肉，口感鲜嫩，营养丰富</view>
      <view style="margin-top: 15rpx" class="flex-between">
        <view class="flex-center">
          <up-avatar
              text="北"
              fontSize="16"
              size="35"
              randomBgColor
          ></up-avatar>
          <view style="margin-left: 10rpx" class="u-f-sl f-c-6">美食达人小王</view>
        </view>
        <view>
          <view class="flex-top" style="color: red">
            1444
            <up-icon name="heart" size="20" color="red"></up-icon>
          </view>
        </view>
      </view>
    </a-card>
  </view>
</template>
<script lang="ts" setup>
import {reactive} from 'vue';
import ACard from "@/components/a-card.vue";
import {toPath} from "@/util/router/router";

// 创建响应式数据
const list1 = reactive([
  {name: '全部'},
  {name: '家常菜'},
  {name: '烘焙'},
  {name: '快手菜'},
  {name: '减脂餐'},
  {name: '西餐'},
  {name: '川菜'},
  {name: '川菜'},
  {name: '川菜'},
  {name: '川菜'},
]);


</script>

<style scoped lang="scss">
@import "~@/static/css/index.css";

.img-box {
  position: relative;

  .cook-tag {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    &>view{
      margin-left: 10rpx;
      background: rgba(255,255,255,0.5);
      border-radius: 10rpx;
      color: white;
      padding:5rpx 10rpx;
      font-size: 24rpx;
    }
  }
}

</style>